.realtime-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.realtime-item{
    width: 21%;
    margin: 2%;
    box-sizing: border-box;
    position: relative;
}
.monitor-tag{
    position: absolute;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #6fc323;
    z-index: 2;
    border: 1px solid rgba(140, 140, 140, 0.8);
    box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7),
    0px 0px 10px 5px rgba(255, 255, 255, 0.4) inset;
}
.realtime-item .tag-default{
    background: #6fc323;
}
.realtime-item .tag-error{
     background: #9a9a9a;
 }
.realtime-item .tag-warning{
    background: #ff5934;
}
.monitor-body{
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 5%;
    background: #ffffff;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 1;
    border: 1px solid rgba(140, 140, 140, 0.8);
    box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7),
    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
}
.realtime-item .monitor-body h4{
    text-align: center;
}
.realtime-item .monitor-body h4:after{
    content: ' ';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 10px;
    background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%);
}
.realtime-box .monitor-body>div p{
    display: inline-block;
}
.realtime-box .monitor-body>div{
    padding: 0 5%;
}
.realtime-box .monitor-body>div{
    font-size: 20px;
}
.monitor-body .footer{
    /*position: absolute;*/
    margin: 0;
    left: 0;
    color: rgb(127, 124, 124);
    height: 25px;
    width: 100%;
    padding: 0px 0px 0 0;
    border-top: 1px solid rgb(219, 229, 232);
    border-radius: 0 0 10px 10px;
    z-index: 5;
    background: repeating-linear-gradient(-45deg,
    rgb(247, 247, 247) ,
    rgb(247, 247, 247) 15px,
    rgb(225, 234, 235) 15px,
    rgb(225, 234, 235) 30px,
    rgb(247, 247, 247) 30px
    );
}



